<!-- 热门商品流量来源报表 -->
<template>
  <div class="mainTable">
    <div class="tablePage" v-loading="loading">
      <div class="search">
        <div class="header-query" key="searchTimeSpan">
          <span class="search-text">查询时间</span>
          <el-date-picker v-model="query.searchTimeSpan" class="search-input dateTime-picker" type="daterange"
            range-separator="至" :start-placeholder="query.searchTimeSpan[0]" :end-placeholder="query.searchTimeSpan[1]"
            format="yyyy-MM-dd" value-format="yyyy-MM-dd" :picker-options="pickerOptions"></el-date-picker>
        </div>
        <div class="search-btn" @click="getTableData()">
          <div class="btn-img"></div>查询
        </div>
        <div class="export-btn" @click="exportTable" v-loading="exportLoading">
          <div class="btn-img"></div>
          {{ !exportLoading ? "导出" : "导出中" }}
        </div>
      </div>
      <div class="base-table">
        <el-table highlight-current-row ref="myTable" :data="tableData" height="100%" @sort-change="handleSortChange">
          <el-table-column :prop="v.prop" :label="v.name" v-for="v in tableItems" :key="v.prop" show-overflow-tooltip
            sortable="custom" :header-align="v.align ?? 'right'" :align="v.align ?? 'right'"
            :width="v.width ? v.width : '150'">
            <template slot-scope="scope">
              <span v-if="scope.row[v.prop] !== ''">{{ scope.row[v.prop] }}</span>
              <span v-else>---</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :page-size="pagination.pageSize" :current-page="pagination.currentPage" :total="pagination.total"
          :page-sizes="[15, 50, 100, 300]" background layout="total,sizes, prev, pager, next, jumper"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs"
import { service } from "../../../services/backServices"
import { export_json_to_excel } from "@/assets/js/FilExport";
export default {
  name: "rmsplllybb",
  data() {
    return {
      query: {
        searchTimeSpan: [dayjs(new Date()).add(-1, 'months').format("YYYY-MM-DD"), dayjs(new Date()).format("YYYY-MM-DD")],
      },
      //表格表头
      tableItems: [

        { name: "数据统计时间", prop: "数据统计时间", align: "left", width: "200" },
        { name: "商品ID", prop: "商品ID", align: "left" },
        { name: "商品名称", prop: "商品名称", align: "left", width: "450" },
        { name: "支付金额", prop: "支付金额", align: "right" },
        { name: "周GMV", prop: "周GMV" },
        { name: "销售占比", prop: "销售占比", align: "right" },
        { name: "商品访客数", prop: "商品访客数", align: "right" },
        { name: "支付买家数", prop: "支付买家数", align: "right" },
        { name: "支付转化率", prop: "支付转化率", align: "right", width: "100" },
        { name: "支付商品件数", prop: "支付商品件数", align: "right" },
        { name: "客单价", prop: "客单价", align: "right" },
        { name: "核心活动动作一级", prop: "核心活动动作一级", align: "left" },
        { name: "核心活动动作二级", prop: "核心活动动作二级", align: "left" },
        { name: "核心活动动作三级", prop: "核心活动动作三级", align: "left" },
        { name: "流量来源支付金额", prop: "流量来源支付金额" },
        { name: "流量来源访客数", prop: "流量来源访客数" },
        { name: "流量来源支付买家数", prop: "流量来源支付买家数" },
        { name: "流量来源支付转化率", prop: "流量来源支付转化率" },
        { name: "流量来源支付商品件数", prop: "流量来源支付商品件数" },
        { name: "69码", prop: "69码", align: "left" },
        { name: "实际到手价", prop: "实际到手价", align: "right" },
        { name: "开单价", prop: "开单价", align: "right" },
        { name: "赠品费率", prop: "赠品费率", align: "right" },
        { name: "大促底价", prop: "大促底价", align: "right" },
        { name: "破大促价差", prop: "破大促价差", align: "right" },

      ],
      methodParam: "genTop20GoodsReport",
      //base need
      pagination: {
        pageSize: 15,
        currentPage: 1,
        total: 0
      },
      tableAllData: [

      ],
      sortCol: "数据统计时间",
      orderCol: null,
      exportLoading: false,
      loading: false,

      pickerOptions: {
        shortcuts: [
          {
            text: "最近一天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近两天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 2);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              picker.$emit("pick", [start, end]);
            },
          }
        ],
        disabledDate: (time) => {
          // return time.getTime() > Date.now() - 8.64e7;
          return time.getTime() > Date.now();
        },
      },
    };
  },
  computed: {
    tableData() {
      return this.tableAllData.slice(
        (this.pagination.currentPage - 1) * this.pagination.pageSize,
        this.pagination.currentPage * this.pagination.pageSize
      )
    }
  },
  components: {
  },
  methods: {
    cleanTableData() {
      this.tableAllData = []
    },

    //表格参数改变触发
    handleSizeChange: function (val) {
      this.pagination.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange: function (currentPage) {
      this.pagination.currentPage = currentPage;
      this.getTableData();
    },
    getTableData() {
      let _this = this
      this.loading = true

      let myForm = new FormData()
      myForm.append("startDate", this.query.searchTimeSpan[0]);
      myForm.append("endDate", this.query.searchTimeSpan[1]);

      //#region 排序相关（放在myForm之后）
      if (_this.sortCol != null) {
        myForm.append('sortBy', _this.sortCol)
      }
      if (_this.orderCol == 'ascending') {
        myForm.append('asc', 1)
      }
      //#endregion

      service({
        url: this.methodParam,
        method: "post",
        data: myForm
      }).then(response => {
        this.loading = false
        if (response.data.code == 200) {
          this.tableAllData = response.data.data;
          this.pagination.total = response.data.data.length;
          if (this.tableData.length == 0 && this.pagination.currentPage != 1) {
            this.pagination.currentPage = 1;
          }
        }
      })
    },
    handleSortChange({ prop, order }) {
      this.sortCol = prop;
      this.orderCol = order;
      this.getTableData()
    },
    exportTable() {
      this.exportLoading = true;
      let _this = this;

      if (this.tableAllData.length <= 0) {
        _this.$notify({
          message: "当前数据为空",
          type: "error",
          position: "bottom-right",
          duration: 1000,
        });
        this.exportLoading = false;
        return;
      }
      let filename = "" + dayjs().format("YYYY-MM-DD HH:ss:mm");
      let multiHeader = []; //标题设置
      let tHeader = [], filterVal = [];

      _this.tableItems.forEach(v => {
        tHeader.push(v.name);
        filterVal.push(v.prop);
      })
      let jsonData = this.tableAllData;
      let merges = []; // 合并单元格
      export_json_to_excel({
        multiHeader,
        header: tHeader,
        merges,
        filterVal,
        jsonData,
        filename: filename,
        autoWidth: 30,
        bookType: "xlsx",
      });
      this.exportLoading = false;
    },
  },
  created() {
    let _this = this

  },
  mounted() {
    this.getTableData()
  }
};
</script>

<style scoped lang="less">
.mainTable {
  background-color: #f1f2f9;
}
</style>